<template>
  <div class="ranking-view">
    <yk-metal-ranking :tableData="tableData"></yk-metal-ranking>
    <yk-swiper :tableData="tableData"></yk-swiper>
  </div>
</template>

<script>
import { ref } from "@vue/reactivity";
import YkMetalRanking from "./YkMetalRanking.vue";
import YkSwiper from "./YkSwiper.vue";
import axios from "axios";
export default {
  components: { YkMetalRanking, YkSwiper },
  setup() {
    const tableData = ref([]);

    axios
      .get("https://apia.yikeapi.com/olympic/", {
        params: {
          appid: 87116144,
          appsecret: "sh4hcKnn",
        },
      })
      .then((res) => {
        const resData = res.data.list;
        const handledData = [];
        resData.forEach((item, index) => {
          handledData.push({
            ranking: index + 1,
            country: item.country,
            styleIndex: "--i: " + index,
            flagUrl: item.flag,
            gold: item.jin,
            silver: item.yin,
            bronze: item.tong,
            total: item.total,
          });
        });
        console.log(resData);
        tableData.value = handledData;
      });
    return { tableData };
  },
};
</script>

<style scoped>
.header,
.footer {
  height: 120px;
  width: 100%;
  line-height: 120px;
  text-align: center;
  font-size: 30px;
  background-color: lightblue;
}
.footer {
  height: 60px;
  line-height: 60px;
}
.ranking-view {
  margin: 0 auto;
  height: 100%;
  display: flex;
  width: 80%;
  overflow: hidden;
}
</style>